const http = require('http')

// const server = http.createServer((req,res)=> {
//     let { url,method } = req;
//     console.log(url,method);
//     res.setHeader("Content-Type","text/html;charset=utf-8")
//     if(url == '/register' && method == "GET") {
//         res.end('<h1>注册页面</h1>')
//     } else if(url == '/login' && method == "GET") {
//         res.end('<h1>登录页面</h1>')
//     } else {
//         res.end("<h1>404 Not Found</h1>")
//     }
// })

const server = http.createServer((request,response)=> {
    response.end(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            td{
                padding: 20px 40px;
            }
            table tr:nth-child(odd){
                background: #aef;
            }
            table tr:nth-child(even){
                background: #fcb;
            }
            table, td{
                border-collapse: collapse;
            }
            table td {
                transition: background-color 0.3s, color 0.3s;
            }
            table td:hover {
                cursor: pointer;
            }
        </style>
        </head>
        <body>
            <p>这是一个隔行变色的表格</p>
            <table border="1">
                <tr>
                    <td>1</td><td>2</td><td>3</td>
                </tr>
                <tr>
                    <td>4</td><td>5</td><td>6</td>
                </tr>
                <tr>
                    <td>7</td><td>8</td><td>9</td>
                </tr>
                <tr>
                    <td>10</td><td>11</td><td>12</td>
                </tr>
                <tr>
                    <td>13</td><td>14</td><td>15</td>
                </tr>
            </table>
        <script>
            //获取所有的 td
            let tds = document.querySelectorAll('td');
            //遍历
            tds.forEach((item,index) => {
                item.onclick = function(){
                    tds.forEach(ele=> {
                        ele.style.background = 'none';
                        ele.style.color = '#000';
                    })
                    this.style.background = '#222';
                    this.style.color = '#fff';
                }
            })
        </script>
        </body>
        </html>
    `)
    // let htmls = require('fs').readFileSync(__dirname+'/index.html')
    // response.end(htmls)
}).listen(8082, ()=> {
    console.log('服务已启动，监听端口8082中...');
})